<template>
<div v-if="viewLoading" style="padding-bottom: 60px;">
  <van-cell-group>
    <div class="van-cell van-hairline van-field">收款信息</div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>打款账号</span></div>
      <div class="van-cell__value">{{ data.user_buy.account }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>打款人手机号</span></div>
      <div class="van-cell__value">{{ data.user_buy.cellphone }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>打款推荐人手机号</span></div>
      <div class="van-cell__value">{{ data.parent_user_buy.cellphone }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款属性</span></div>
      <div class="van-cell__value" v-if="data.user_bank_info.type.toString() == '1'">云支付</div>
      <div class="van-cell__value" v-else-if="data.user_bank_info.type.toString() == '2'">支付宝</div>
      <div class="van-cell__value" v-else-if="data.user_bank_info.type.toString() == '3'">银行卡</div>
    </div>
    <!--
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款真实姓名</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_name }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款账号</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_account }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款数量</span></div>
      <div class="van-cell__value">{{ data.trade_buy.amount }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款开户地址</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_address_detail }}</div>
    </div>
    -->
    <div class="van-cell van-hairline van-field" v-if="data.trade_buy.image">
      <div class="van-cell__title"><span>收款图片<br /><small>(点击打开)</small></span></div>
      <div class="van-cell__value"><img :src="config.uploadUrl+data.trade_buy.image" style="height: 100px;" @click="openBuyImage" ></div>
    </div>
  </van-cell-group>

  <van-cell-group v-if="data.trade_sell.status=='3'">
    <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
      <div class="van-cell__title"><span>安全密码</span></div>
      <div class="van-cell__value">
        <input v-model="formFields.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入安全密码" class="van-field__control">
        <div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
      </div>
    </div>

    <van-button size="small" style="width: 100%;" type="primary" @click="onSubmit">确认收款</van-button>
  </van-cell-group>
</div>
</template>

<script>
import qs from 'qs';
import { NavBar, Field, CellGroup, Button, Toast, ImagePreview } from 'vant';
import ajaxVant from '../../../../utils/ajaxVant';
import auth from '../../../../utils/auth';
import config from '../../../../config';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  data() {
    return {
      config: config,
      data: {},
      formFields: {
        safePassword: ''
      },
      viewLoading: false
    };
  },
  methods: {
    openBuyImage(e) {
      ImagePreview([e.target.currentSrc], 1);
    },
    getData() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/trade/sell/' + _this.$route.params.id + '?token=' + token).then(function(data) {
          if (data !== false) {
            _this.data = data;
            _this.viewLoading = true;
          }
        });
      });
    },
    onSubmit() {
      var _this = this;
      _this.$validator.validateAll().then((result) => {
        if (result) {
          auth.getToken().then(function(token) {
            ajaxVant.post('/trade/sell/' + _this.$route.params.id + '/status/6?token=' + token, qs.stringify(_this.formFields)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);

                setTimeout(() => {
                  Toast.clear();
                  _this.$router.push({ name: 'tradeSellLog' });
                }, 1000);
              }
            });
          });
        };
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
